<template>
  <div class="chart-container">
    <el-card>

      <el-row :gutter="32">
        <el-col class="first" :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <age-chart :chart-data="topLeft" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="15">
          <div class="chart-wrapper">
            <age-recent />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <mid-left :chart-data="midLeftData" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="11">
          <div class="chart-wrapper">
            <pie-chart :chart-data="midRightData" />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bottom-left :chart-data="pieChartData" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="15">
          <div class="chart-wrapper">
            <bottom-right :chart-data="bottomRightData" />
          </div>
        </el-col>

      </el-row>

      <div class="sex-div1">
        <sex-div />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAge,
  getDegree,
  getDegreeRecent,
  getSide,
  getSideRecent
} from '@/api/dataanalysis'

import AgeChart from './components/Age'
import AgeRecent from './components/AgeRectent'
import MidLeft from './components/MidLeft'
import pieChart from './components/PieChart'
import BottomLeft from './components/BottomLeft'
import BottomRight from './components/BottomRight'
import SexDiv from './components/Sex'

export default {
  name: 'MixChart',
  components: {
    AgeChart,
    AgeRecent,
    pieChart,
    MidLeft,
    BottomLeft,
    BottomRight,
    SexDiv },
  data() {
    return {
      topLeft: [
        { value: 0, name: '18-25岁人数' },
        { value: 0, name: '26-35岁人数' },
        { value: 0, name: '36-55岁人数' },
        { value: 0, name: '56岁以上人数' }
      ],
      midLeftData: {
        grade: [],
        junior: [],
        professional: [],
        senior: [],
        college: [],
        university: [],
        graduate: [],
        daytime: []
      },
      midRightData: [['score', 'amount', 'type'], [], [], [], [], [], [], []],
      bottomLeftData: {
        title: '2021.1.2',
        dataList: [
          {
            value: 20,
            name: 'nnn'
          },
          {
            value: 30,
            name: 'jjj'
          }
        ]
      },
      bottomRightData: { side: [], noside: [], daytime: [] },
      // 饼所需数数据
      pieChartData: {
        name: ['主职业', '副职业'],
        totalData: [
          {
            value: 88,
            name: '主职业'
          },
          {
            value: 90,
            name: '副职业'
          }
        ]
      }
    }
  },
  created() {
    this.getTopLeft()
    this.getMidLeft()
    this.getMidRight()
    this.getBottomData()
    this.getBottomRightData()
  },
  methods: {
    getTopLeft() {
      getAge().then((response) => {
        const josn11 = [{}, {}, {}, {}]
        josn11[0].name = '18-25岁人数'
        josn11[0].value = response.data.search
        josn11[1].name = '26-35岁人数'
        josn11[1].value = response.data.build
        josn11[2].name = '36-55岁人数'
        josn11[2].value = response.data.run
        josn11[3].name = '56岁以上人数'
        josn11[3].value = response.data.keep
        this.topLeft = josn11
      })
    },
    getMidLeft() {
      getDegreeRecent().then((response) => {
        const json1 = {
          grade: [],
          junior: [],
          professional: [],
          senior: [],
          college: [],
          university: [],
          graduate: [],
          daytime: []
        }
        for (let i = 0; i < response.data.length; i++) {
          json1.grade[i] = response.data[i].grade
          json1.junior[i] = response.data[i].junior
          json1.professional[i] = response.data[i].professional
          json1.senior[i] = response.data[i].senior
          json1.college[i] = response.data[i].college
          json1.university[i] = response.data[i].university
          json1.graduate[i] = response.data[i].graduate
          json1.daytime[i] = response.data[i].daytime
        }
        this.midLeftData = json1
      })
    },
    getMidRight() {
      getDegree().then((response) => {
        const arr1 = [['score', 'amount', 'type'], [], [], [], [], [], [], []]
        const total =
          response.data[0].grade +
          response.data[0].junior +
          response.data[0].professional +
          response.data[0].senior +
          response.data[0].college +
          response.data[0].university +
          response.data[0].graduate

        const score1 = Math.round((response.data[0].grade / total) * 100)

        const score2 = Math.round((response.data[0].junior / total) * 100)
        const score3 = Math.round(
          (response.data[0].professional / total) * 100
        )
        const score4 = Math.round((response.data[0].senior / total) * 100)
        const score5 = Math.round((response.data[0].college / total) * 100)
        const score6 = Math.round((response.data[0].university / total) * 100)
        const score7 = Math.round((response.data[0].graduate / total) * 100)

        arr1[1][0] = score1
        arr1[1][1] = response.data[0].grade
        arr1[1][2] = '小学'
        arr1[2][0] = score2
        arr1[2][1] = response.data[0].junior
        arr1[2][2] = '初中'
        arr1[3][0] = score3
        arr1[3][1] = response.data[0].professional
        arr1[3][2] = '职高'
        arr1[4][0] = score4
        arr1[4][1] = response.data[0].senior
        arr1[4][2] = '高中'
        arr1[5][0] = score5
        arr1[5][1] = response.data[0].college
        arr1[5][2] = '专科'
        arr1[6][0] = score6
        arr1[6][1] = response.data[0].university
        arr1[6][2] = '本科'
        arr1[7][0] = score7
        arr1[7][1] = response.data[0].graduate
        arr1[7][2] = '研究生及以上'
        this.midRightData = arr1
      })
    },
    getBottomData() {
      getSide().then((response) => {
        const json1 = {
          dataList: [
            { value: 0, name: '' },
            { value: 0, name: '' }
          ]
        }
        json1.dataList[0].value = response.data[0].side
        json1.dataList[0].name = '副职业'
        json1.dataList[1].value = response.data[0].noside
        json1.dataList[1].name = '主职业'
        this.pieChartData.totalData = json1.dataList
      })
    },
    getBottomRightData() {
      getSideRecent().then((response) => {
        const json1 = { side: [], noside: [], daytime: [] }
        for (let i = 0; i < response.data.length; i++) {
          json1.side[i] = response.data[i].side
          json1.noside[i] = response.data[i].noside
          json1.daytime[i] = response.data[i].daytime
        }

        this.bottomRightData = json1
      })
    }
  }
}
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
}
.el-card{
  background-color: #f5f5f5;
}

h1 {
  color: #000;
  text-align: center;
  height: 80px;
  line-height: 78px;
  font-weight: bolder;
  font-family: "楷体";
  margin-bottom: 10px;
}
.chart-wrapper,.sex-div1 {
  border-radius: 5px !important;
  box-shadow: 0.1em 0.1em 0.3em #a09f9f;
}

.el-row {
  margin-bottom: 50px;
  height: 500px;
}
.el-col {
  margin-left: 10px;
  height: 500px;
  border-radius: 20px !important;
}
.age-left {
  width: 25%;
  margin-left: 15px;
}

</style>
